<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100" v-model="searchKey.nickname" placeholder="请输入教练姓名" />
			</Col>
		</Row>
		<Row>
			<div class="w-100 d-flex justify-content-end align-items-center ">
				<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
			</div>
			</Row>
			
		<!-- 	<div class="p-1 d-flex justify-content-end">
			  <Button class="text-xss ml-2" type="primary" size="small" @click="gotofzrule()">分账规则</Button>
			</div> -->
		<!-- </Row>
		<div class="mt-1  d-none d-xl-block">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="headimg">
					<div>
						<img style="width: 40px; height: 40px;" :src="row.headimg" />
					</div>
				</template> -->
			<!-- 	<template slot-scope="{ row, index }" slot="sex">
					<div>
						<span v-if="row.sex == '1'">男</span>
						<span v-if="row.sex == '2'">女</span>
					</div>
				</template> -->
			<!-- 	<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" class="mr-2" @click="show(row.fxjlid)">详细</Button>
				</template> -->
				
		
			<!-- 	
			</Table> -->
	<!-- 	</div>
		<div class="mt-1 d-xl-none">
		  <Row>
		    <Col class="p-1" v-for="(row, index) in tableInfo.data" :key="row.fxjlid" :xs="24" :sm="24" :md="12" :lg="12">
		      <div class="text-xss rounded shadow text-secondary p-1 bg-light">
		        <div class="p-1 d-flex justify-content-between">
		          <span>分销记录编号 </span><span>{{row.fxjlid}}</span>
		        </div>
		        <div class="p-1 d-flex justify-content-between">
		          <span>金额 </span><span>{{row.amount}}</span>
		        </div>
				<div class="p-1 d-flex justify-content-between">
				  <span>分销规则 </span><span>{{row.fxrid}}</span>
				</div>
				<div class="p-1 d-flex justify-content-between">
				  <span>分销比例 </span><span>{{row.tqper}}</span>
				</div>
				<div class="p-1 d-flex justify-content-between">
				  <span>级别 </span><span>{{row.level}}</span>
				</div>
				<div class="p-1 d-flex justify-content-between">
				  <span>分销金额 </span><span>{{row.fxje}}</span>
				</div>
		<div class="p-1 d-flex justify-content-between">
		  <span>发生日期 </span><span>{{row.ct}}</span>
		</div>
		        <div class="p-1 d-flex justify-content-end">
		          <Button class="text-xss ml-2" type="primary" size="small" @click="show(row.fxjlid)">详细</Button>
		
		        </div>
				
			
				
		      </div>
		    </Col> -->
		<!--  </Row> -->
		<!-- </div> -->
		
		
<!-- 		<div class="mt-1 ">
		  <Row>
		    <Col class="p-1" v-for="(row, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="8" :xl="6"
					:xxl="6">
					
		      <div class="text-xss rounded shadow overflow-hidden">
				  
		        <div class="p-2 bg-black-80 text-fuguang d-flex text-lg justify-content-start">
		          <span>{{row.fxjlid}}</span>
		        </div>
				
				<div class="p-2 bg-black-80 text-fuguang d-flex text-lg justify-content-start">
					<span class="iconfont icon-xiangmujine pl-1"></span>
				  <span class="ml-1">{{row.amount}}元</span>
				</div>
				
		        <div class="p-2 bg-black-80 text-fuguang d-flex text-xxl justify-content-around">
				<span class="iconfont icon-fenchengbili pl-1">
					  <span class="ml-1">{{row.tqper}}</span>
				</span>
		       <span class="iconfont icon-huiyuanjibiechuli pl-1">
				  <span class="ml-1">{{row.level}}</span>
				  	</span>
		        </div>
				
				<div class="p-2 bg-black-80 text-qingdai d-flex text-lg justify-content-start">
				
				</div>

				<div class="p-2 bg-black-80 text-qingbai d-flex text-xxl justify-content-end">
			
				 <span class="ml-1">分销金额：¥{{row.fxje}}</span>
				
				 
				</div>
				
			
		
		        <div class="p-2 bg-black-80 text-qingbai d-flex text-xxl justify-content-end">
		          <Button class="text-xss ml-2" type="primary" size="small" @click="show(row.skjlid)">详细</Button>
		
		     </div>
		           </div>
		         </Col>
		       </Row>
		     </div>
		
		
		<div>
			<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
				:total="tableInfo.total" />
		</div> -->
		
		<div class="mt-1">
				  <Row>
				    <Col class="p-1" v-for="(row, index) in tableInfo.data"  :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="6">
				      <div class="text-xss rounded shadow text-secondary p-1 bg-black-80 text-fuguang ">
				        <div class="p-2 d-flex justify-content-start text-fuguang text-lg" >
		<!-- 		          <span>提取记录</span> -->
						  <span>{{row.ct}}</span>
				        </div>
		<!-- 		        <div class="p-1 d-flex justify-content-between">			
				        </div> -->
						<div class="p-2 d-flex justify-content-end text-fuguang text-xss">
						  <span>{{row.fxjlid}}</span>
						</div>
						<div class="p-2 position-relative  d-flex justify-content-between align-items-center text-fuguang text-xss">
							<div class="w-25  position-relative">
							<!-- <img class="w-100 h-100":src="row.cover"/> -->
							<div class=" text-sm">
							<span class="iconfont icon-fenchengbili pl-1"></span>
							 <span class="pl-1">{{row.tqper}}</span></div>

							<div class=" text-sm"> 
							<span class="iconfont icon-huiyuanjibiechuli pl-1"></span>
				             <span class="pl-1">{{row.level}}</span></div>
							</div>
							
							<div class="w-75 text-danhong ">
								<div class="p-1 d-flex justify-content-end">
		<!-- 							<span>实际金额</span> -->
									<span class="text-danhong text-blod text-sm">分销{{row.fxje}}元</span>
									
								</div>
								<div class="p-1 d-flex justify-content-end">
								
								<span class="text-danhong text-blod">充值{{row.amount}}元</span>
															
														</div>
								<!-- <div class="p-2 d-flex justify-content-end align-items-center">
									<span class="text-danhong text-blod">
										<span v-if="row.zt == 'R'">已提取</span>
										<span v-if="row.zt == 'F'">已到账</span>
									</span>
								</div> -->
							</div>
						</div>
						
						
		
				        <div class="p-1 d-flex justify-content-end">
				          <Button class="text-xss ml-2" type="primary" size="small" @click="show(row.fxjlid)">详细</Button>
				
				        </div>
				      </div>
				    </Col>
				  </Row>
				</div>
				<div>
					<Page class="text-right mt-3" :page-size="tableInfo.pageSize" @on-change="pageSearch"
						:total="tableInfo.total" />
				</div>
		
		
		
		
	  </div>
</template>
<script>
	export default {
		data() {
			return {
				searchKey: {
					clientid: "",
					openid: "",
					nickname: "",
					sex: "",
					age: "",
					headimg: "",
					from: "",
					tel: "",

				},
				tableInfo: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
					columnInfo: [
						{
							title: "分销记录编号",
							key: "fxjlid",
						},
						{
							title: "金额",
							key: "amount",
						},
						{
							title: "分销规则",
							key: "fxrid",
						},
						{
							title: "分销比例",
							key: "tqper",
						},
						{
							title: "级别",
							key: "level",
						},
						{
							title: "分销金额",
							key: "fxje",
						},
						{
							title: "发生日期",
							key: "ct",
						},
						{
							title: "操作",
							slot: 'action',
							width: 150
						}
					],
					data: []
				}
			}
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			newUser: function() {
				this.$router.push({
					path: "/client/new"
				})
			},
			show: function(fzjlid) {
				this.$router.push({
					path: "/fzjl/detail?id=" + fzjlid
				})
			},
			remove: function(fzjlid) {
				this.message.confirm({
					title: "删除提示",
					content: "即将删除场馆，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/fzjl/info",
							param: {
								fzjlid
							}
						}).then(data => {
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			searchs: function() {
				this.tableInfo.currentPage = 1;
				this.search();
			},
			search: function() {
				this.http.get({
					url: "/jl/fzjl/page",
					param: {
						// 传一个当前页
						current: this.tableInfo.currentPage,
						size:this.tableInfo.pageSize,
						// searchKey: this.searchKey.clientid
					}
				}).then(data => {
					this.tableInfo.data = data.fxjl.records;
					this.tableInfo.currentPage = data.current;
					this.tableInfo.total = data.total;
					this.tableInfo.pageSize = data.size;
				});
			},
			pageSearch: function(changedPage) {
				this.tableInfo.currentPage = changedPage;
				this.search();
			},
			gotofzrule:function(){
				this.$router.detail.open({name: "set_divrule"})
				
				
			}
		},
		created: function() {
			this.init();
		},
		
	}
</script>

<style>

</style>